<template>
  <div class="footer-page">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="160px"
    >
      <el-form-item
        label="所在地址:"
        prop="provinceArr"
      >
        <el-cascader
          clearable
          filterable
          placeholder="请选择"
          v-model="form.provinceArr"
          :options="areaList"
          :props="optionProps"
          separator="-"
          @change="form.address=''"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label="地址详细信息"
        prop="address"
      >
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请如实填写您的归还地址信息！"
          v-model="form.address"
          :maxlength="50"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="收货人姓名"
        prop="realname"
      >
        <el-input
          clearable
          maxlength="10"
          v-model="form.realname"
          placeholder="请输入收货人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="手机号码"
        prop="mobile"
      >
        <el-input
          clearable
          maxlength="11"
          v-model="form.mobile"
          placeholder="请输入手机号码"
          @input="handleMobileChange"
        ></el-input>
      </el-form-item>
      <el-form-item label="设为默认地址">
        <el-radio
          v-model="form.isdefault"
          :label="1"
        >是</el-radio>
        <el-radio
          v-model="form.isdefault"
          :label="2"
        >否</el-radio>
      </el-form-item>
    </el-form>
    <div class="page-footer-btns">
      <el-button
        size="small"
        type="primary"
        @click="submitForm"
      >保存</el-button>
      <el-button
        size="small"
        @click="resetForm"
      >重置</el-button>
    </div>
  </div>
</template>

<script>
import { getRegion } from "@/api/index";
import { addOrEditReturnAddress, returnAddressById } from "@/api/shop";
export default {
  props: ['editId'],
  data() {
    return {
      form: {
        provinceArr: '',
        address: '',
        realname: '',
        mobile: '',
        isdefault: 2
      },
      rules: {
        provinceArr: [
          { required: true, message: '请选择所在地址', trigger: 'change' },
        ],
        address: [
          { required: true, message: '地址详细信息不能为空', trigger: 'blur' },
        ],
        realname: [
          { required: true, message: '收货人姓名不能为空', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
        ]
      },
      areaList: [],
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const params = { ...this.form };
          params.province = params.provinceArr[0];
          params.city = params.provinceArr[1];
          params.area = params.provinceArr[2];
          delete params.provinceArr;
          if (this.editId) {
            params.id = this.editId;
          }
          addOrEditReturnAddress(params).then(res => {
            this.$router.push({ name: "shopReturnAd" });
          })
        } else {
          this.$message({
            message: "请检查表单错误",
            type: "error"
          });
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['form'].resetFields();
      if (this.editId) {
        this.getData();
      } else {
        this.form = {
          provinceArr: '',
          address: '',
          realname: '',
          mobile: '',
          isdefault: 2
        };
      }
    },
    handleMobileChange() {
      this.form.mobile = this.form.mobile.replace(/[^\d]/g, "");
    },
    getSelect() {
      getRegion().then(res => {
        this.areaList = res ? res[0].sub : [];
      })
    },
    getData() {
      returnAddressById(this.editId).then(res => {
        const { province, city, area, address, realname, mobile, isdefault } = res;
        this.form.provinceArr = [province, city, area];
        this.form.address = address;
        this.form.realname = realname;
        this.form.mobile = mobile;
        this.form.isdefault = isdefault;
      })
    }
  },
  mounted() {
    this.getSelect();
    if (this.editId) {
      this.$route.meta.title = "编辑归还地址";
      this.getData();
    } else {
      this.$route.meta.title = "添加归还地址";
    }
  }
}
</script>

<style>
</style>